<template>
  <view class="pages promoters">
	  <fu-navbar :isBack="true" title="我的资产"  color="#333333"></fu-navbar>
   <fu-tab :tabs="navs" :sticky="true" :scrollspy="true" line-height="6" activeColor="#333333"
   	:lineColor="themeColor" @change="tabSelect" node-key="state" :current="TabCur" current-key="status"></fu-tab>
	
	<view class="top-box flex flex-direction justify-between" v-if="TabCur==8">
		<view class="flex align-center justify-between">
			<view class="flex flex-direction">
				<text class="text-999 fu-fs32 text-bold">累计返佣（元）</text>
				<text class="text-333 fu-fs44 text-bold margin-top-16">{{totalData.total}}</text>
			</view>
			<view class="btn" @click.stop="handleJump" data-url="/pages/goods/goods-list/index">
				立即赚钱
			</view>
		</view>
		<view class="flex align-center justify-between ">
			<view class="flex flex-direction align-center">
				<text class="text-333 text-bold fu-fs32">{{totalData.today}}</text>
				<text class="text-999 text-bold fu-fs24 margin-top-20">本日返佣(元)</text>
			</view>
			<view class="flex flex-direction align-center">
				<text class="text-333 text-bold fu-fs32">{{totalData.week}}</text>
				<text class="text-999 text-bold fu-fs24 margin-top-20">本周返佣(元)</text>
			</view>
			<view class="flex flex-direction align-center">
				<text class="text-333 text-bold fu-fs32">{{totalData.month}}</text>
				<text class="text-999 text-bold fu-fs24 margin-top-20">本月返佣(元)</text>
			</view>
			<view class="flex flex-direction align-center">
				<text class="text-333 text-bold fu-fs32">{{totalData.last_month}}</text>
				<text class="text-999 text-bold fu-fs24 margin-top-20">上月返佣(元)</text>
			</view>
		</view>
	</view>
	<view class="top-box flex flex-direction justify-between" v-if="TabCur==9">
		<view class="flex align-center justify-between">
			<view class="flex flex-direction">
				<text class="text-999 fu-fs32 text-bold">累计获利（元）</text>
				<text class="text-333 fu-fs44 text-bold margin-top-16">{{totalData.total}}</text>
			</view>
			<view class="btn" @click.stop="handleJump" data-url="/pages/goods/goods-list/index">
				立即赚钱
			</view>
		</view>
		<view class="flex align-center justify-between ">
			<view class="flex flex-direction align-center">
				<text class="text-333 text-bold fu-fs32">{{totalData.today}}</text>
				<text class="text-999 text-bold fu-fs24 margin-top-20">本日获利(元)</text>
			</view>
			<view class="flex flex-direction align-center">
				<text class="text-333 text-bold fu-fs32">{{totalData.week}}</text>
				<text class="text-999 text-bold fu-fs24 margin-top-20">本周获利(元)</text>
			</view>
			<view class="flex flex-direction align-center">
				<text class="text-333 text-bold fu-fs32">{{totalData.month}}</text>
				<text class="text-999 text-bold fu-fs24 margin-top-20">本月获利(元)</text>
			</view>
			<view class="flex flex-direction align-center">
				<text class="text-333 text-bold fu-fs32">{{totalData.last_month}}</text>
				<text class="text-999 text-bold fu-fs24 margin-top-20">上月获利(元)</text>
			</view>
		</view>
	</view>
	
	<view class="zz-box">
		<view class="text-bold fu-fs32">
			7日柱状图
		</view>
		<qiun-data-charts 
		      type="column"
		      :opts="opts"
		      :chartData="chartData"
		    />
	</view>
	
	<view class="detaiLiat">
		<scroll-view scroll-y 
			@scrolltolower='loadMore'>
			<view class="list">
				<view class="flex justify-between align-center padding-top-24 padding-lr-32">
					<text class="text-bold fu-fs32">{{TabCur==8?'返佣明细':'获利明细'}}</text>
					<image :src="imgBaseUrl + 'wallet/calendar.png'" class="width-33 height-32" mode=""  @click="showCalendar"></image>
				</view>
				<view class="list-wrap">
					<view class="ongg" v-for="(item, index) in list" :key="index">
						<view class="buy-left">
							<view class="share-right" style="overflow: hidden;">
								<view class="text-cut-2 desc">{{ item.remark }}</view>
								<view class="riqiblls">{{ item.create_time }}</view>
							</view>
						</view>
						<view class="price-right">
							<text v-if="item.after_money - item.before_money > 0"
								class="add">+{{ item.change_money }}</text>
							<text v-else class="jian">{{ item.change_money }}</text>
						</view>
					</view>
				</view>
				<fu-empty-ui v-if="list.length == 0 && isInit"></fu-empty-ui>
			</view>
		
			<!-- 空布局 -->
		</scroll-view>
	</view>
  <fu-popup v-model="isCalendar" mode="center" :mask-close-able="true" @close="closePopup">
    <view class="bg-white radius-16 width-640 padding-lr-sm">
      <fu-calendar @change="change" active-bg-color="#B82441" range-bg-color="#F8E8EB" :future="true" start-text="" end-text="" mode="range" :isDefaultDay="false" :start-time="start_data" :end-time="end_data"></fu-calendar>
    </view>
  </fu-popup>
	<!-- <fu-empty-ui v-if="dataList.length == 0 "></fu-empty-ui> -->
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
  // import fuScroll from '../../components/fu-scroll/fu-scroll.vue';
  export default {
    // components: {
    //   fuScroll
    // },
  data() {
    return {
		  chartData: {},
		      //您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
		      opts: {
		        color: ["#B82441"],
		        padding: [15,15,0,5],
		        enableScroll: false,
				height:120,
		         legend: {
		                  show: false
		                },
		        xAxis: {
		          disableGrid: true,
		        },
		        yAxis: {
					disabled:true,
					disableGrid:true,
		          data: [
		            {
		              min: 0,
					  // max:200
		            }
		          ]
		        },
		        extra: {
		          column: {
		            type: "group",
		            width: 20,
		            activeBgColor: "#000000",
		            activeBgOpacity: 0.08
		          }
		        },
				},
				
		navs: [{
				status: 8,
				name: '自购返佣'
			},
			{
				status: 9,
				name: '分享获利'
			},
		], //标签栏数据
		themeColor:"#B03C31",
		TabCur: 8, //选中标签栏状态值  默认1 全部
      curFilter:false,
      order:'',
      keyword:'',
      isSearch:true,
      scrollHeight:0,
      isLoad:false,
      isData:'more',
      dataContent:{},
      dataList:[],
      page: 1, // 页数
      size: 10, // 页条数
	  list:[],
	  totalData:{},
	  isInit:false,
	  start_data:'',
	  end_data:'',
	  isCalendar:false
    };
  },

  onLoad(options) {
	  
	  this.TabCur = options.type
	  this.getShareMoneydetail()
   // this.handleSearch()
   this.getServerData();
   this.getMoneyList()
  },

  methods: {
	  
	  /**
	   * @description  显示日历
	   */
	  showCalendar() {
	    this.isCalendar = true;
	  },
	  /**
	   * @description  隐藏日历
	   */
	  closePopup() {
	    this.isCalendar = false;
	  },
	  /**
	   * @description  获取列表
	   * @param {Object} value  用来判断第页码初始化第一次 加载页面loading
	   */
	  change(value) {
	    console.log(value)
	    if (value.isInit) return;
	    this.start_data = value.start;
	    this.end_data = value.end;
	    setTimeout(() =>{
	      this.isCalendar = false;
	    },800)
	    this.getMoneyList();
	  },
	  
	  getShareMoneydetail() {
	  	this.$api
	  		.post(global.apiUrls.getShareMoneydetail, {
	  			type: this.TabCur
	  		})
	  		.then(res => {
	  			console.log('明细', res);
	  			if (res.data.code == 1) {
	  				this.totalData = res.data.data
					
					
					setTimeout(() => {
					  //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					  let res = {
					      categories: this.totalData.arr_keys,
					      series: [
					        {
					          // name: "目标值",
					          data: this.totalData.arr_discounts,
					        },
					      ]
					    };
					  this.chartData = JSON.parse(JSON.stringify(res));
					}, 500);
	  			}
	  		})
	  		.catch(err => {
	  			console.log(err);
	  		});
	  },
	  
	  getMoneyList() {
	  	this.$api
	  		.post(global.apiUrls.getMoneyDetail, {
	  			change_type: this.TabCur,
				start_data:this.start_data,
				end_data:this.end_data,
				list_rows:10
	  		})
	  		.then(res => {
	  			console.log('消费明细', res);
	  			if (res.data.code == 1) {
	  				this.list = res.data.data.data;
	  				this.isInit = true;
	  			}
	  		})
	  		.catch(err => {
	  			console.log(err);
	  		});
	  },
	  
	      getServerData() {
	        //模拟从服务器获取数据时的延时
	       
	      },
	    
	  
	  /**
	   * @description 标签栏选择事件
	   * @param {Object} status 入参 status 1 全部 2 未使用 3 已使用 4 已失效
	   */
	  tabSelect(e) {
	  	// pagingListAllowLoadMore fasle 不允许加载数据
	  	
	  	this.TabCur = this.navs[e.index].status;
		this.getShareMoneydetail()
		this.getMoneyList()
	  	// 混入获取数据
	  	// this.pagingListToggle();
	  },
    //主数据
    getContent() {
    	this.$api.post(global.apiUrls.postDistributionPerson, {
    		user_id: global.userInfo && global.userInfo.id || 0,
    	}).then(res => {
    		console.log('推广人统计',res);
    		if (res.data.code == 1) {
          this.dataContent=res.data.data
    		}else{
          this.$message.error(res.data.msg)
        }
    	})
      .catch(err => {
        console.log(err);
      })
    },
    filterClick(type){
      if(type==1){
         this.curFilter=false
         this.order=''
         this.onRefresh()
         return
      }
      this.curFilter=true
      if(this.order=='asc'){
         this.order='desc'
      }else{
         this.order='asc'
      }
      this.onRefresh()
    },
    // 搜索
    handleSearch() {
      if (this.isData != 'more' ) return;
      this.isData = 'more';
      this.isLoad = true;
      let data = {
        sort:this.order,
        user_id:  global.userInfo.id || 0,
        keywords:this.keyword,
        page: this.page,
        list_rows: this.size,
      }
      this.$api.post(global.apiUrls.postDistributionPersonList, data)
        .then(res => {
          console.log('搜索结果', res)
          if (res.data.code == 1) {
            let totalSize = res.data.data.total;
            let list = res.data.data.data;
            if (this.page == 1){
              this.dataList = [];
            };

            if(this.page == 1 && list.length == 0){
              this.isData = 'noData';
              this.isLoad = false;
              // this.$refs.refresh.close();
              return
            }
            this.dataList = this.dataList.concat(list);
            if (this.dataList.length >= totalSize) {
              this.isData = 'noMore';
            } else {
              this.isData = 'more';
              this.page++;
            }

          } else {
             this.isData = 'noData';
            this.$message.error(res.data.msg);
          }
          this.isLoad = false;
          this.$refs.refresh.close();
        }).catch(err => {
          this.$refs.refresh.close();
          this.isLoad = false;
          this.isData = 'noData';
          console.log(err)
           this.$message.error(err);
        })
    },
    clear(){
      this.keyword = '';
      this.onRefresh()
    },
    // 刷新
    onRefresh(){
      console.log('刷新')
      let that = this;
      this.page = 1;
      this.isData = 'more';
      this.handleSearch();
    },
    // 加载
    onBottom(){
      // console.log('加载更多')
      this.handleSearch();
    }
  }
};
</script>

<style lang="scss" scoped>
.top-box{
	// width: 702rpx;
	height: 346rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	opacity: 1;
	margin: 20rpx 24rpx;
	padding: 32rpx;
	.btn{
		width: 168rpx;
		height: 60rpx;
		background: #B82441;
		border-radius: 80rpx;
		opacity: 1;
		color: #ffffff;
		line-height: 60rpx;
		text-align: center;
	}
}
.zz-box{
	height: 400rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	opacity: 1;
	margin: 20rpx 24rpx;
	padding: 32rpx;
	padding-bottom: 64rpx;
	box-sizing: border-box;
}


.hl-box{
	height: 612rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	opacity: 1;
	margin: 20rpx 24rpx;
}

.detaiLiat {
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
	
		margin-top: 32rpx;
		.list {
			border-radius: 24rpx;
			width: 100%;
			background-color: #fff;
			
	
			.list-wrap {
				// width: 702rpx;
				margin: 0 32rpx;
			}
	
			.ongg {
				height: 132rpx;
	
				margin: 0 auto;
				// padding:0 32rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #eee;
	
				.buy-left {
					flex: 1;
					display: flex;
					justify-content: flex-start;
					align-items: center;
	
					.share-right {
						// padding-top: 10rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 53rpx;
						flex: 1;
	
						.desc {
							line-height: 42rpx;
							font-size: 28rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							color: #333333;
						}
	
						.riqiblls {
							line-height: 32rpx;
							margin-top: 8rpx;
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							color: #bfbfbf;
						}
					}
				}
	
				.price-right {
					padding-right: 10rpx;
					font-size: 32rpx;
					font-family: 'Oswald';
					font-weight: 400;
	
					opacity: 1;
	
					.add {
						color: #FB2A25;
					}
	
					.jian {
						color: #333333;
					}
				}
			}
		}
	}
</style>
